<template>
    <div class="chance-popover-view">

                <el-popover
                        ref="popover1"
                        v-model:visible="visible"
                        :disabled="disabled"
                        :placement="position"
                        :width="900"
                        trigger="click"
                >
                    <template #reference>
                        <slot />
                    </template>
                    <div style="display: flex;justify-content: space-between;padding-bottom: 10px">
                        <div>
                            <span v-if="column" style="color: #f57861;">您选择的市场准入：{{ column.chanceName }}</span>
                        </div>

                        <div class="btn-view">
                            <!-- <el-button class="border-btn" size="mini" @click="onClose">关闭</el-button> -->
                            <el-button
                                    class="border-btn"
                                    size="mini"
                                    @click="onCancel"
                            >取消
                            </el-button>
                            <el-button
                                    class="main-btn"
                                    size="mini"
                                    type="primary"
                                    @click="onConfirm"
                            >确定
                            </el-button>
                        </div>

                    </div>
                    <el-table
                            ref="singleTable"
                            max-height="300px"
                            header-cell-class-name="popover-table-header"
                            border
                            :data="tableData"
                            highlight-current-row
                            style="width: 100%"
                            @current-change="handleCurrentChange"
                            @row-dblclick="handledbclick"
                    >
                        <el-table-column
                                show-overflow-tooltip
                                label="市场准入编号"
                                prop="chanceNo"
                                header-align="center"
                                min-width="100"
                        />
                        <el-table-column
                                show-overflow-tooltip
                                prop="chanceName"
                                label="市场准入名称"
                                header-align="center"
                                width="200px"
                        />
                        <el-table-column
                                prop="region"
                                align="center"
                                label="准入地区"
                                :min-width="250"
                        >
                            <template #default="scope">
                                <area-list-view :areas="scope.row.region" />
                            </template>
                        </el-table-column>
                        <el-table-column
                                show-overflow-tooltip
                                align="left"
                                prop="productPopularName"
                                header-align="center"
                                label="产品名称"
                                :min-width="150"
                        />
                        <el-table-column
                                show-overflow-tooltip
                                prop="productName"
                                label="商品名"
                                :min-width="150"
                        />
                        <el-table-column
                                show-overflow-tooltip
                                prop="packSpecs"
                                label="包装规格"
                                :min-width="100"
                        />
                        <el-table-column
                                prop="expireTime"
                                label="结束日期"
                                :min-width="120"
                                align="center"
                        >
                            <template #default="scope">
                                {{ dateFormat("yyyy-mm-dd", scope.row.expireTime) }}
                            </template>
                        </el-table-column>
                    </el-table>
                </el-popover>

    </div>
</template>
<script>

import {defineComponent, getCurrentInstance, inject, onMounted, ref, watch,} from 'vue'

export default defineComponent({
        name: 'Index',
        props: {
            position: {
                type: String,
                default: 'bottom-start',
            },
            disabled: {
                type: Boolean,
                default: false,
            },
        },
        setup(props, { emit }) {
            const currentInstance = getCurrentInstance()
            const api = inject('api')
            var visible = ref(false)
            var tableData = ref([])
            var column = ref(null)
            const singleTable = ref(null)

            const getData = () => {
                let popData = {
                    page:1,
                    pageSize:100,
                    chanceStatus:'2',
                }
                api.chance.CHANCE_LIST(popData).then((res) => {
                    if (res.code == 0) {
                        if (res.data.list != null) {
                            tableData.value = res.data.list
                        }
                    }
                    // console.log(listData,total)
                })
            }

            watch(
                () => props.searchs,
                (newS, oldS) => {
                    getData()
                    visible.value = true
                }
            )

            onMounted(() => {
                document.addEventListener('click', function(e) {
                    var pop = document.getElementById('pricePopover')

                    if (e.target != pop && !document.contains(pop, e.target)) {
                    } else {
                        visible.value = false
                    }
                })
            })

            const handleCurrentChange = (val) => {
                column.value = val
            }

            const onConfirm = () => {
                if (!column) {
                    currentInstance.proxy.customMessage({
                        type: 'error',
                        message: '请选择市场准入',
                    })
                }

                const a = JSON.parse(JSON.stringify(column.value))
                emit('confirm', a)

                setTimeout(() => {
                    column.value = null
                    visible.value = false
                }, 100)
            }

            const onCancel = () => {
                singleTable.value.setCurrentRow()
                column.value = null
                visible.value = false
            }

            const onClose = () => {
                singleTable.value.setCurrentRow()
                column.value = null
                visible.value = false
            }

            const handledbclick = (row, column, event) => {
                column.value = row
                emit('confirm', column)
                visible.value = false
            }

            const openPopover = () => {
                getData()
                setTimeout(() => {
                    visible.value = true
                }, 300)
            }

            return {
                visible,
                tableData,
                singleTable,
                column,

                handleCurrentChange,
                onConfirm,
                onCancel,
                onClose,
                handledbclick,
                openPopover,
            }
        },
    })
</script>

<style lang="scss" scoped>

</style>
